<template>
	<view class="district" v-if="pagedList.length">
		<scroll-view scroll-x class="scroll-x" @scroll="scroll" :show-scrollbar="false">
			<view class="list" v-for="(page, pageIndex) in pagedList" :key="pageIndex">
				<view class="li" v-for="(val, k) in page" :key="k" @click="categorySwitchTab(val)">
					<view class="li-base u-flex-center">
						<zero-lazy-load :height="108" imgMode='aspectFill' :image="val.image"
							class="image"></zero-lazy-load>
					</view>
					<view class="li-text">{{val.name}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="scroll" :style="{ width: computedValue.scrollWidth() }">
			<view class="scroll-active" :style="{ transform: `translateX(${activeDotOffsets}px)` }"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed
	} from 'vue';
	import {
		navigateTo,
		switchTab
	} from '@/utils/router.js';

	const pagedList = ref([]);
	const activeDotOffsets = ref(0);
	const scrollLeft = ref(0);
	const productCategoryList = ref([{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		},
		{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		},
		{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		},
		{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		},
		{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		},
		{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		},
		{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		},
		{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		},
		{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		},
		{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		},
		{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		},
		{
			image: "https://qn.mtj.cdydsy.com/uploads/spread/20250318/image/56d2df7c098e50ea67e1515aa73214d5.png",
			name: "热卖推荐"
		}
	]);

	const splitList = (list = []) => {
		const itemsPerPage = 10;
		let result = [];
		for (let i = 0; i < list.length; i += itemsPerPage) {
			result.push(list.slice(i, i + itemsPerPage));
		}
		pagedList.value = result;
	};

	watch(
		() => productCategoryList.value,
		(newList) => {
			if (newList.length) {
				splitList(newList);
			}
		}, {
			immediate: true
		}
	);

	// 计算滚动条宽度
	const calculateScrollWidth = () => {
		return `${pagedList.value.length * 19}px`;
	};

	// 滚动，设置滚动条偏移位置
	const scroll = (e) => {
		scrollLeft.value = e.detail.scrollLeft;
		const itemWidth = 375 * pagedList.value.length;
		const scrollWidth = parseInt(calculateScrollWidth(), 10);
		const maxOffset = scrollWidth - 19;
		let scrollRatio = 0;
		if (itemWidth > 375) {
			scrollRatio = scrollLeft.value / (itemWidth - 375);
		}
		let activeDotOffset = scrollRatio * maxOffset;
		activeDotOffset = Math.min(activeDotOffset, maxOffset);
		activeDotOffset = Math.max(activeDotOffset, 0);
		activeDotOffsets.value = activeDotOffset;
	};

	const computedValue = computed(() => {
		return {
			scrollWidth: calculateScrollWidth
		};
	});

	// 点击事件
	const categorySwitchTab = (e) => {
		if (e.mod_type === 2) {
			navigateTo(`/apparatusSubPackages/index/index?tabbarIndex=1&id=${e.id}`);
		} else {
			switchTab('/pages/classify/index');
			// this.$store.commit("init/setCategory", e.id)
		}
	};
</script>

<style lang="scss">
	.district {
		padding: 0 18rpx;
		overflow: hidden;

		.scroll-x {
			white-space: nowrap;
		}

		.list {
			width: 100%;
			display: inline-flex;
			flex-wrap: wrap;

			.li {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				width: 20%;
				margin-top: 38rpx;

				.li-text {
					padding-top: 12rpx;
					font-size: $font-size-24;
					color: #202020;
				}

				.li-base {
					.image {
						width: 108rpx;
						height: 108rpx;
						display: block;
					}
				}
			}
		}

		.scroll {
			height: 4rpx;
			background-color: #EEEEEE;
			border-radius: 2rpx;
			margin: 30rpx auto 6rpx;

			.scroll-active {
				width: 19px;
				height: 4rpx;
				background: #888888;
				border-radius: 2rpx;
				transition: transform 0.1s;
			}
		}
	}
</style>